<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <el-button @click="addDish">添加菜品</el-button>
                <el-button>批量启用</el-button>
                <el-button>批量停用</el-button>
                <el-button>批量删除</el-button>
            </el-header>
            <el-main>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column fixed prop="menuName" label="菜品名称" />
                    <el-table-column prop="inventory" label="剩余库存" />
                    <el-table-column prop="status" label="点餐中开启">
                        <template v-slot="scope">
                            <el-switch  v-model="scope.row.status"  />
                        </template>
                    </el-table-column>
                    <el-table-column prop="right" label="操作">  
                        <template v-slot="scope">
                            <el-button link type="primary" size="small" @click="Preview(scope.row)">预览</el-button>
                            <el-button link type="primary" size="small" @click="editDish(scope.row)">编辑</el-button>
                            <el-button link type="primary" size="small" @click="DelDish(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>
    <el-dialog v-model="dialogFormVisible" title="菜品详情" width="500">
    <el-form :model="form">
        <el-form-item label="菜品名称">
           <span>{{form.menuName}}</span>
        </el-form-item>
        <el-form-item label="菜品图片">
            <span>{{form.menuImg}}</span>
        </el-form-item>
        <el-form-item label="菜品介绍">
            <span>{{form.menuDesc}}</span>
        </el-form-item>
        <el-form-item label="销售价">
            <span>{{form.price}}</span>
        </el-form-item>
        <el-form-item label="库存">
            <span>{{form.inventory}}</span>
        </el-form-item>
        <el-form-item label="菜品分组">
            <span>{{form.menuTypeName}}</span>
        </el-form-item>   
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage,ElMessageBox } from "element-plus";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
import { getMenulist,DelMenu } from "@/api/index.ts";
const tableData = ref([]);
onMounted(() => {
    GetMenus()
})
const GetMenus = () => {
    getMenulist().then((res) => {
        tableData.value = res.data;
        console.log(res.data);
    })
}

const addDish=()=>{

    router.push({
        path:'/InsertDishesView',
   })
   
}
const dialogFormVisible = ref(false);
const form = reactive({
    id:0,
    menuName: '',
    menuImg: '',
    menuDesc: '',
    price: '',
    inventory: '',
    menuTYpeId: '',
    menuTypeName:'',
})
const Preview=(row:any)=>{
    dialogFormVisible.value = true;
    form.id=row.id
    form.menuName=row.menuName
    form.menuImg=row.menuImg
    form.menuDesc=row.menuDesc
    form.price=row.price
    form.inventory=row.inventory
   form.menuTypeName=row.menuTypeName
   console.log(row);
}
const editDish=(row:any)=>{
    
   router.push({
        path:'/UpdateDishesView',
        query:{
            id:row.menuId
        }
   })
   console.log(row.menuId);
}
const DelDish=(id:any)=>{
    ElMessageBox.confirm(
    '确定要删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        DelMenu(id).then((res) => {
            if(res.code==200){
                ElMessage.success("删除成功")
                GetMenus()
            }else{
                ElMessage.error("删除失败")
            }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
</script>
